<template>
  <AppLayout>
    <div :class="styles['dashboard-content']">
      <div :class="styles['dashboard-header']">
        <h1 :class="styles['page-title']">管理员仪表板</h1>
        <p :class="styles['page-subtitle']">欢迎使用Exam AI智能考试系统</p>
      </div>

      <div :class="styles['dashboard-stats']">
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">👥</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.totalUsers }}</h3>
            <p :class="styles['stat-label']">总用户数</p>
          </div>
        </div>
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">📝</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.totalExams }}</h3>
            <p :class="styles['stat-label']">总考试数</p>
          </div>
        </div>
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">❓</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.totalQuestions }}</h3>
            <p :class="styles['stat-label']">总题目数</p>
          </div>
        </div>
        <div :class="styles['stat-card']">
          <div :class="styles['stat-icon']">📊</div>
          <div :class="styles['stat-content']">
            <h3 :class="styles['stat-number']">{{ stats.totalRecords }}</h3>
            <p :class="styles['stat-label']">考试记录</p>
          </div>
        </div>
      </div>

      <div :class="styles['dashboard-sections']">
        <div :class="styles['section-card']">
          <h2 :class="styles['section-title']">快速操作</h2>
          <div :class="styles['quick-actions']">
            <button :class="styles['action-btn']" @click="navigateTo('/admin/users')">
              <i :class="styles['action-icon']">👥</i>
              <span>用户管理</span>
            </button>
            <button :class="styles['action-btn']" @click="navigateTo('/admin/exams')">
              <i :class="styles['action-icon']">📝</i>
              <span>考试管理</span>
            </button>
            <button :class="styles['action-btn']" @click="navigateTo('/admin/questions')">
              <i :class="styles['action-icon']">❓</i>
              <span>题目管理</span>
            </button>
            <button :class="styles['action-btn']" @click="navigateTo('/admin/analytics')">
              <i :class="styles['action-icon']">📈</i>
              <span>统计分析</span>
            </button>
          </div>
        </div>

        <div :class="styles['section-card']">
          <h2 :class="styles['section-title']">系统状态</h2>
          <div :class="styles['system-status']">
            <div :class="styles['status-item']">
              <span :class="styles['status-label']">数据库连接</span>
              <span :class="[styles['status-value'], styles['success']]">正常</span>
            </div>
            <div :class="styles['status-item']">
              <span :class="styles['status-label']">服务状态</span>
              <span :class="[styles['status-value'], styles['success']]">运行中</span>
            </div>
            <div :class="styles['status-item']">
              <span :class="styles['status-label']">系统版本</span>
              <span :class="styles['status-value']">v1.0.0</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/admin/dashboard.module.css'

const router = useRouter()

const stats = ref({
  totalUsers: 0,
  totalExams: 0,
  totalQuestions: 0,
  totalRecords: 0
})

const navigateTo = (path) => {
  router.push(path)
}

onMounted(async () => {
  // 模拟数据加载
  stats.value = {
    totalUsers: 1250,
    totalExams: 45,
    totalQuestions: 1200,
    totalRecords: 5600
  }
})
</script>